// 销售排行图表
<template>
  <div class="com_container" style="height: 100%">
    <div style="height: 100%" class="com_chart" ref="rank_page"></div>
  </div>
</template>

// echarts渐变色
// https://blog.csdn.net/believet93/article/details/109637874

<script>
import { mapState } from 'vuex'

export default {
  name: "Rank",
  data() {
    return {
      dom: null, // 挂载图表容器的实例对象
      data: null, // 服务器中获取的数据
      timerId: null, // 定时器的标识
      startValue: 0,
      endValue: 9,
      titleFontSize: 0, // 自适应改变大小
    };
  },
  // 模板渲染成html后调用
  mounted() {
    this.initChart(); // 初始化图表
    window.addEventListener("resize", this.screenAdapt);
    this.screenAdapt();
  },
  // 组件销毁后
  destroyed() {
    clearInterval(this.timerId); // 关闭定时器
    window.removeEventListener("resize", this.screenAdapt); // 移除这个事件
  },
  methods: {
    // 初始化echart实例(lnstance)对象
    initChart() {
      this.dom = this.$echarts.init(this.$refs.rank_page, this.theme);
      this.getData();
      // 移上
      this.dom.on("mouseover", () => {
        clearInterval(this.timerId);
      });
      // 移出
      this.dom.on("mouseout", () => {
        this.openSetInterval();
      });
    },
    // 获取服务器的数据，并渲染图表
    async getData() {
      const color = [
        ["#0BA82C", "#4FF778"],
        ["#2E72BF", "#23E5E5"],
        ["#5052EE", "#AB6EE5"],
      ];
      // 获取数据
      let { data } = await this.$http.get("rank");
      this.data = data;

      // 对data里面的每一个元素进行排序，从小到大进行
      this.data.sort((a, b) => {
        return b.value - a.value;
      });

      // 开启定时器(数据进行平移)
      this.openSetInterval();

      // x轴数据
      let xData = data.map((item) => {
        return item.name;
      });
      // y轴数据
      let yData = data.map((item) => {
        return item.value;
      });

      let initOption = {
        title: {
          text: "▎地区销售排行",
          top: 20,
          left: 20,
          textStyle: {
            fontSize: this.titleFontSize,
          },
        },
        grid: {
          top: "35%",
          left: "5%",
          right: "5%",
          bottom: "5%",
          containLabel: true,
        },
        tooltip: {
          show: true,
        },
        dataZoom: {
          show: false,
          startValue: this.startValue,
          endValue: this.endValue,
        },
        xAxis: {
          type: "category",
          data: xData,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            type: "bar",
            data: yData,
            color: (arg) => {
              let graphicColor = null;
              if (arg.value >= 200) {
                graphicColor = color[0];
              } else if (arg.value >= 100) {
                graphicColor = color[1];
              } else {
                graphicColor = color[2];
              }
              return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: graphicColor[0],
                },
                {
                  offset: 1,
                  color: graphicColor[1],
                },
              ]);
            },
            barWidth: this.titleFontSize,
            itemStyle: {
              barBorderRadius: [this.titleFontSize / 2, this.titleFontSize / 2, 0, 0],
            },
          },
        ],
      };
      this.dom.setOption(initOption);
    },

    // 更新图表视图
    async updateChart() {
      // 配置项
      let option = {};
      this.dom.setOption(option);
    },

    // 当浏览器大小发生变化时，就要让图表适配屏幕
    screenAdapt() {
      this.titleFontSize = (this.$refs.rank_page.offsetWidth / 100) * 3.6;

      let option = {
        title: {
          textStyle: {
            fontSize: this.titleFontSize,
          },
        },
        // 如果删除了这项配置就不会报错了，但是会失去本组件全屏后（柱条的宽度）***************
        series: [
          {
            type: 'bar',
            barWidth: this.titleFontSize,
            itemStyle: {
              barBorderRadius: [this.titleFontSize, this.titleFontSize, 0, 0],
            },
          }
        ]
      }

      this.dom.setOption(option);
      this.dom.resize();
    },

    // 图标平移
    openSetInterval() {
      this.timerId = setInterval(() => {
        this.startValue++;
        this.endValue++;
        // 进行数值的边界约束
        if (this.endValue >= this.data.length) {
          this.startValue = 0;
          this.endValue = 9;
        }
        // 重新渲染图表
        this.dom.setOption({
          dataZoom: {
            startValue: this.startValue,
            endValue: this.endValue,
          },
        });
      }, 1000);
    },
  },
  computed: {
    ...mapState(['theme'])
  },
  watch: {
    theme() {
      this.dom.dispose() // 销毁当前的图表
      this.initChart()  // 重新以最新的主题名称初始化图表对象
      this.screenAdapt()  // 完成屏幕的适配
      this.updateChart()  // 更新图表的展示
    }
  }
};
</script>

<style lang="less" scoped></style>